<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Font-Size - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">font-size</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>]
    [<b><i class="fs">IE3B1</i></b>|<b class="s">N4B2</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Font Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="fontsizeadjust.htm">font-size-adjust</a><br>
    <a href="fontstretch.htm">font-stretch</a><br>
    <a href="font.htm">font</a><br>
    <a href="fontstyle.htm">font-style</a><br></td>
    <td valign=top><a href="fontvariant.htm">font-variant</a><br>
    <a href="fontweight.htm">font-weight</a><br>
    <a href="fontfamily.htm">font-family</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">medium</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>Yes</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>&lt;<b class="tagname">font</b>
        <span class="tagattrib">SIZE</span>=&quot;(+/-)N&quot;&gt;</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#font-size">CSS1: Sect 5.2.6</a><br> 
        <a href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props">CSS2: Sect 15.2.4 </a>,
        <a href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props">CSS2.1: Sect 15.7</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property controls the size of text for a section. Objects within
        a section (such as Applets, Images and Horizontal Rules) are not
        affected by this property. The actual size of the font can be different
        than the value specified for 'font-size' due to interactions with the
        'font-size-adjust' property. Child elements inherit the calculated value
        of the 'font-size' property.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">N6</i></b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">xx-small</b> | <b class="subheading">x-small</b> |
    <b class="subheading">small</b> | <b class="subheading">medium</b> |
    <b class="subheading">large</b> | <b class="subheading">x-large</b> |
    <b class="subheading">xx-large</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3B1</i></b>|<b class="s">N4B3</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        These values are computed against a table of available font sizes compiled by
        the browser. Medium is the default value for the 'font-size' property and
        should be equivalent to the current browser default size. A scaling factor
        of 1.2 is suggested in CSS2 for adjacent keyword values.</dd>

<dt><b class="subheading">smaller</b> | <b class="subheading">larger</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4B1</i></b>|<b><i class="fs">N4B3</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        This size change value is relative to the font size of the parent element
        but is limited in range to that allowed by the system.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3B1</i></b>|<b class="s">N4B2</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to either the length in relation to the current element or an
        absolute measurement. Negative values are not allowed.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE3B1</i></b>|<b class="s">N4B3</b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to a percentage of the font size of the parent element.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">h5.xsmall</b>
        { <span class="property">font-size:</span> x-small }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">h5</b>
        <span class="tagattrib">STYLE</span>=&quot;<span
        class="property">font-size:</span>
        x-small&quot;&gt;text&lt;/<b class="tagname">h5</b>&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>In CSS1 the suggested font scaling factor between explicit keyword
        indices was 1.5. Practice proved this value to be too large, so the
        recommendation was changed to a scaling factor of 1.2.
    <li>For this property in CSS2, the 'em' and 'ex' measurements refer to the
        font size of the parent element.
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">All</b>
        <dl>
            <dd>- The "inherit" value is listed in the standards for this property, although 
                the property is itself inherited. This means it is impossible to check
                to see if this value is actually supported in any browser. Mozilla began 
                generally supporting "inherit" where appropriate in version 6.x, and 
                Opera beginning mostly in 7.x. IE does not yet support "inherit" anywhere 
                yet. So, for all inherited properties, support information for the 
                "inherit" value will be listed as beginning in these respective versions.
        </dl>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">3.0:</b>
            <dd>- Keyword values of "smaller"/"larger" both treated as "small"
            <dd>- Negative values for length measurements are converted to
                positive values, not ignored as they should be.
            <dd>- Percentages are based on the default font-size for an element,
                not the font-size of the parent.
            <dd><b class="alert2">4.0+:</b>
            <dd>- Default font-size is now "small", not "medium".
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
            <dd><b class="alert2">4.0:</b>
            <dd>- Default font-size is "small", not "medium" as expected.
            <dd>- Using the keyword "smaller" from the default font size ("small")
                sets the size to "xx-small", not "x-small" as expected.
            <dd>- Using the keyword "larger" from the default font size ("small")
                sets the size to an almost-"large" size, but not exactly the same.
            <dd>- Percentages under 100% quickly make the text content unreadable
                (as well as changing the color of the text.)
            <dd>- 100% is not the same as the default font size.
            <dd>- Percentages are based on the default font-size, not the
                font-size of the parent.
           <dd>- If you use the 'font' property, you <em>MUST</em> specify
               <em>BOTH</em> the 'font-size' and 'font-family' sub-components
               of this property or else the style declaration will be ignored -
               even if you have also set the 'font-size' and 'font-family'
               properties individually for the same selector! Specifying both
               of these sub-properties for 'font' is actually required under
               the specifications, but Netscape is the only browser that
               requires it. IE and Opera are fine if you only use one of these.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">3.5:</b>
            <dd>- Using the keyword "smaller" from the default font size ("medium")
                sets the size to "x-small", not "small" as expected.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>